<!DOCTYPE html>
<html style="width:100%;height:100%;">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.one{
					margin:0; width:100%; height:100%;
			}
			.two{
					width:calc(12% - 2px);height:calc(100% - 2px); float:left;
			}
			.three{
					width:calc(100% - 2px);height:calc(35% - 2px); border:1px solid #9ce8cd; float:left;
			}
			.three2{
					width:100%; height:10%; float:left;
					background:linear-gradient(180deg,rgba(224,241,237,1) 50%,rgba(193,227,226,1) 50%);
					font-size:14px; text-align:left;
			}
			.four{
					width:calc(100% - 2px); height:calc(65% - 2px); border:1px solid #9ce8cd; float:left;
			}
			.four2{
					width:calc(100% - 2px); height:calc(65% - 2px); border:1px solid #9ce8cd; float:left;
			}
			.five{
					width: calc(88% - 2px);
				    height: 100%;
				    float: left;
			}
			.six{
				    width: 100%;
				    height: calc(70% - 2px);
				    float: left;
				    display: inline-block;
			}
			.seven{
				    width: calc(60% - 2px);
				    height: calc(100% - 2px);
				    float: left;
				    border: 1px solid #9ce8cd;
			}
			.eight{
				width: calc(40% - 2px);
				    height: calc(100% - 2px);
				    float: left;
			}
			.nine{
					width: calc(100% - 2px);
					height: calc(50% - 1px);
					border: 1px solid #9CE8CD;
					float: left;
					display: inline-block;
			}
			.ten{
					width: calc(100% - 2px);
					height: calc(30% - 2px);
				    border: 1px solid #9CE8CD;
				    float: left;
				    display: inline-block;
			}
		</style>
	</head>
	<body class="one">
		<div class="two" >
			<div class="three">
				<div class="three2">标题1</div>
			</div>
			<div class="four"></div>
		</div>
		<div class="five">
			<div class="six" >
				<div class="seven"></div>
				<div class="eight">
					<div class="nine"></div>
					<div class="nine"></div>
				</div>
			</div>
			<div class="ten" ></div>
		</div>	
	</body>
</html>